<!--
 * @Description: 
 * @Version: 2.0
 * @Date: 2024-04-10 08:25:07
 * @LastEditTime: 2024-04-10 09:08:11
-->

<template>
  <div class="container">
    <h1>500 Server error</h1>
    <p>
      页面将在<span>{{ time }}</span
      >秒后自动跳转首页，<br />
      您也可以点击这里跳转<a href="/">登录页</a>
    </p>
    <Icon500 class="icon" />
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import Icon500 from "@/assets/icons/500.vue";
import { ref, onMounted, onUnmounted } from "vue";

const router = useRouter();
const time = ref(10);
const time_end = ref();

// 倒计时
const GoIndex = () => {
  let _t = 9;
  time_end.value = setInterval(() => {
    if (_t !== 0) {
      time.value = _t--;
    } else {
      router.replace("/");
      clearTimeout(time_end.value);
      time_end.value = null;
    }
  }, 1000);
};

onMounted(() => {
  GoIndex();
});

onUnmounted(() => {
  clearTimeout(time_end.value);
  time_end.value = null;
});
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  text-align: center;
  // background: url("@/assets/icons/404.svg") no-repeat;
  // background-position: center;
  position: fixed;
  h1 {
    width: 100%;
    position: absolute;
    top: 10%;
    text-align: center;
  }
  p {
    position: absolute;
    top: 60%;
    left: 20%;
    transform: translate(-50%, 0);
    color: #000;
    span {
      color: orange;
      font-family: "仿宋";
      font-size: 25px;
    }
    a {
      font-size: 30px;
      color: aqua;
      text-decoration: underline;
    }
  }
  .icon {
    width: 50%;
    // height: 100%;
    position: absolute;
    top: 20%;
    left: 30%;
  }
}
</style>
